<template>
    <div>
        <div class="pay"  v-for="(item,index) in listR" :key="index" v-if="listR.length > 0">
            <div class="pay-1">矿机掉线故障通知</div>
            <div class="pay-2">
                {{item.name}}您好，您的矿机在挖矿过程中出现故障,我们已 将故障处理并恢复其上线！请知晓！
            </div>
            <div class="pay-3">
                <div>机架编号</div>
                <div>{{item.frame_num}}</div>
            </div>
            <div class="pay-3">
                <div>掉线时间</div>
                <div>{{item.drop_line_time}}</div>
            </div>
            <div class="pay-3">
                <div>掉线时间</div>
                <div>{{item.on_line_time}}</div>
            </div>
            <div class="pay-3" style="border:none">
                <div>掉线原因</div>
                <div>{{item.content}}</div>
            </div>
        </div>
        <!-- {{listR.length}} -->
        <div  v-if="listR && listR.length < 1">
            <noContent></noContent>
        </div>
    </div>
  
</template>

<script>
import noContent from "../components/noContent"
export default {
    data() {
        return {};
    },
    props:["listR"],
    components: {
        noContent
    },
    methods: {
        scroll(event) {
            console.log(event);
        }
    },
    created() {},
    mounted() {
    }
};
</script>

<style scoped>
#box{
    overflow-y: scroll;
    background-color: #f5f5f5;
}
.pay {
  width: 690rpx;
  height: 600rpx;
  margin-left: 30rpx;
  margin-top: 30rpx;
  background-color: white;
  border-radius: 4rpx;
}
.pay-1{
    width: 630rpx;
    height: 100rpx;
    line-height: 100rpx;
    font-weight: bold;
    font-size: 32rpx;
    margin-left: 30rpx;
    border-bottom: 2rpx solid #CACACA;
    box-sizing: border-box;
}
.pay-2{
    width: 630rpx;
    height: 100rpx;
    font-size: 28rpx;
    color: #666666;
    margin-left: 30rpx;
    border-bottom: 2rpx solid #CACACA;
    box-sizing: border-box;
    margin-top: 20rpx;
}
.pay-3{
    width: 630rpx;
    height: 95rpx;
    font-size: 28rpx;
    color: #666666;
    margin-left: 30rpx;
    border-bottom: 2rpx solid #CACACA;
    box-sizing: border-box;
    line-height: 95rpx;
}
.pay-3 div:nth-of-type(1){
    float: left;
    width: 200rpx;
}
.pay-3 div:nth-of-type(2){
    float: left;
    width: 430rpx;
    text-align: right;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
</style>
